<template>
<div>
  <head title="Order details"></head>
  <scroller class="wrapper">
    <div class="tophead" v-if="goods_info.type==1||goods_info.type==2">
      <!-- type=1 2 	未支付 -->
      <!-- type=3  	已支付 -->
      <!-- type_2=1  	已支付 未发货-->
      <!-- type_2=2  	已发货 -->
      <!-- type_2=3   已收货 -->
      <text class="headTit">Payment pending</text>
      <text class="headdes">payment will be cancelled in {{hours }} hours {{minutes}} minutes</text>
    </div>
    <div class="tophead" v-if=" goods_info.type_2==1">
      <text class="headTit">Waiting for shipping</text>
      <text class="headdes"></text>
    </div>
    <div class="tophead" v-if=" goods_info.type_2==2">
      <text class="headTit">Waiting for delivery</text>
      <text class="headdes">Seller has shipped</text>
    </div>
    <div class="tophead" v-if=" goods_info.type_2==3">
      <text class="headTit">Waiting for Review</text>
      <text class="headdes"></text>
    </div>
    <div class="section1">
      <div
        class="shipNow"
        v-if="Traces.length>0"
        @click="gonext('root:app/user/order_list/delivery.js',{shipper_code:goods_info.shipper_code,logistic_code:goods_info.logistic_code})"
      >
        <div class="wuliu">
          <text class="location">{{Traces[0].AcceptStation}}</text>
          <text class="time">{{Traces[0].AcceptTime}}</text>
        </div>
        <text class="iconfont">&#xe6a1;</text>
      </div>
      <div class="user">
        <text class="userName">{{goods_info.name}}</text>
        <text class="userPhone">{{goods_info.phone }}</text>
      </div>
      <text class="address">{{goods_info.address}}</text>
    </div>
    <div class="section2" v-for="(item,index) in goods_info.list" :key="index">
      <div class="order_top">
        <image class="googPic" @click="toGoodsDetail(item)" :src="item.thumb" />
        <div class="goods_info">
          <text class="goods_title">{{item.title}}</text>
          <div class="goods_spec">
            <text class="priceInfo">{{item.goods_option}}</text>
            <text class="specInfo">X {{item.number}}</text>
          </div>
          <div style=" align-items: flex-end;padding-top:10px">
            <text
              v-if="item.is_refund=='1'"
              @click="push('root:app/user/order_list/refundDetail.js',{goodInfo:item})"
            >Applying for refund</text>
            <text
              v-if="(goods_info.type_2==1||goods_info.type_2==2)&&(item.is_refund!='1'&&item.is_refund!='2')"
              class="btns blackBtn"
              @click="push('root:app/user/order_list/Refund.js',{data:item})"
            >Refund</text>
          </div>
        </div>
      </div>
      <div class="priceBox"></div>
    </div>
    <div class="priceBox">
      <div class="orderPrice">
        <text class="titPrice">Product price</text>
        <text class="price">{{goods_info.total_price}}</text>
      </div>

      <div class="orderPrice">
        <text class="titPrice">Voucher</text>
        <text class="price">-{{goods_info.coupon_price}}</text>
      </div>
      <div class="orderPrice">
        <text class="titPrice">GIV delivery</text>
        <text class="price">{{goods_info.total_postage}}</text>
      </div>
      <div class="orderPrice">
        <text class="titPrice">Total price</text>
        <text class="realprice">{{goods_info.pay_price}}</text>
      </div>
    </div>
    <div class="section1 mb100">
      <text class="deTit">Order details</text>
      <div class="detailItem">
        <div class="itemLeft">
          <text class="detaTit">Order Number</text>
          <text class="detaInf">{{goods_info.out_trade_no}}</text>
        </div>
        <text class="copy" @click="copyOrder">copy</text>
      </div>
      <div class="detailItem"> 
        <div class="itemLeft">
          <text class="detaTit">Creation time</text>
          <text class="detaInf">{{goods_info.create_time|formatDateTime }}</text>
        </div>
        <text class></text>
      </div>
      <div class="detailItem" v-if="goods_info.type=='3'">
        <div class="itemLeft">
          <text class="detaTit">Payment time</text>
          <text class="detaInf">{{ goods_info.pay_time|formatDateTime}}</text>
        </div>
        <text class></text>
      </div>
      <div class="detailItem" v-if="goods_info.type=='3'">
        <div class="itemLeft">
          <text class="detaTit">View Invoice</text>
          <text
            class="detaInf viewBox"
            @click="gonext('root:app/user/order_list/invoice.js',{id:goods_info.id})"
          >View</text>
        </div>
        <text class></text>
      </div>
    </div>
  </scroller>
  <div class="bottomBtn" v-if="goods_info.type==1||goods_info.type==2">
    <text class="btn" @click="cancelOrder">Cancel</text>
    <text
      class="btn"
      @click="push('root:app/user/address/address.js', {
        type: 'shop'
      })"
    >Change address</text>
    <text class="btn blackBtn" @click="conFirm">Confirm and Pay</text>
  </div>

  <div class="bottomBtn" v-if="goods_info.type_2&&goods_info.type_2==2">
    <text class="btn blackBtn" @click="sureReceive">Item received</text>
  </div>
  <div class="bottomBtn" v-if="goods_info.type_2==3">
    <text
      v-if="goods_info.goods_type=='1'"
      class="btn blackBtn"
      @click="push('root:app/user/order_list/evaluation.js',{id:goods_info.id})"
    >Write a review</text>
  </div>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template>

<script>
import asCore from "../../../mixin/core";
import Utils from "../../../mixin/utils";
const selectAddress = new BroadcastChannel("selectAddress");
const updataList = new BroadcastChannel("updataList");

import {
  upload,
  get_order_co_info,
  get_order_express,
  get_order_pay,
  del_order_co,
  co_order_take,
  co_order_edit_address
} from "../../../mixin/ajax.js";
export default {
  data() {
    return {
      Traces: [],
      days: "",
      hours: "",
      minutes: "",
      seconds: "",
      goods_info: {}
    };
  },
  created() {
    selectAddress.onmessage = this.changeAddress;
  },
 
  methods: {
    onLoad(param) {
      let type = 0;
      if (param && param.param) {
        return false;
      }
      if (param && param.id) {
        this.orderId = param.id;
      }
      asCore.getBsessionid(userId => {
        this.userId = userId;
        this.getOrderDetail();
      });
    },
    sureReceive() {
      this.isLoading = true;
      co_order_take(
        { users_id: this.userId, co_order_id: this.orderId },
        (res, flag) => {
          this.isLoading = false;
          if (flag) {
            this.toast(res.message);
            this.getOrderDetail();
          }
        }
      );
    },
    toGoodsDetail(item) {
      if (item.goods_id) {
        if (item.goods_type == "1") {
          this.push("root:app/goods/goods.js", { id: item.goods_id });
        } else {
          this.push("root:app/goods/goods2.js", { id: item.goods_id });
        }
      }
    },
    changeAddress(msg) {
      this.addressData = msg.data;
      this.isLoading = true;
      co_order_edit_address(
        {
          users_id: this.userId,
          co_order_id: this.orderId,
          address_id: msg.data.id
        },
        (res, flag) => {
          this.isLoading = false;

          if (flag) {
            this.toast(res.message);
            if (res.code == 200) {
              this.getOrderDetail();
            }
          }
        }
      );
    },
    copyOrder() {
      const clipboard = weex.requireModule("clipboard");
      clipboard.setString(this.goods_info.out_trade_no + "");
      this.toast("success copy");
    },
    getOrderDetail() {
      get_order_co_info(
        {
          users_id: this.userId,
          co_order_id: this.orderId
        },
        (res, flag) => {
          if (flag) {
            if (res.code == 200) {
              var pref = weex.requireModule("storage");
              pref.setItem("orderDetail", JSON.stringify(res.data));

              this.goods_info = Object.assign({}, this.goods_info, res.data);
              if (res.data.type == "2") {
                this.getoverTime(res.data.end_time);
              }
              if (res.data.shipper_code && res.data.logistic_code) {
                this.getExpress(res.data.shipper_code, res.data.logistic_code);
              }
            }
          }
        }
      );
    },

    getoverTime(end_time) {
      var endDate = new Date(end_time * 1000);
      //当前时间
      var nowDate = new Date();
      //相差的总秒数
      var totalSeconds = parseInt((endDate - nowDate) / 1000);
      //天数
      this.days = Math.floor(totalSeconds / (60 * 60 * 24));
      //取模（余数）
      var modulo = totalSeconds % (60 * 60 * 24);
      //小时数
      this.hours = Math.floor(modulo / (60 * 60));
      modulo = modulo % (60 * 60);
      //分钟
      this.minutes = Math.floor(modulo / 60);
      //秒
      this.seconds = modulo % 60;
    },
    getExpress(shipper_code, logistic_code) {
      get_order_express(
        {
          shipper_code: shipper_code,
          logistic_code: logistic_code
        },
        (res, flag) => {
          if (flag) {
            if (res.code == 200) {
              this.Traces = res.Traces;
            } else {
              this.Traces = [];
            }
          }
        }
      );
    },
    cancelOrder(item, index) {
      this.isLoading = true;
      del_order_co(
        { users_id: this.userId, co_order_id: this.goods_info.id },
        (res, flag) => {
          this.isLoading = false;
          if (flag) {
            if (res.code == 200) {
              //
              updataList.postMessage("update");
              this.back();
            }
          }
        }
      );
    },
    conFirm() {
      this.isLoading = true;
      get_order_pay(
        {
          users_id: this.userId,
          co_order_id: this.goods_info.id,
          is_pay: 2
        },
        (res, flag) => {
          this.isLoading = false;
          if (flag) {
            if (res.code == 200) {
              let url = "root:app/pay/web.js";

              if (Utils.env.isWeb()) {
                window.location.href = `https://www.empirise.com/mall/public/web/pay.html?id=${res.data.id}&amount=${res.data.pay_price}&userId=${that.userId}`;
              } else {
                this.push(url, {
                  id: res.data.id,
                  amount: res.data.pay_price,
                  userId: this.userId
                });
              }
            } else {
              this.toast(res.message);
            }
          }
        }
      );
    },
    gonext(url, parma) {
      this.push(url, parma);
    }
  }
};
</script>

<style scoped>
.wrapper {
  background-color: #f5f5f5;
}

.tophead {
  width: 750px;
  padding: 30px 32px;
  background-color: #ffffff;
}

.headTit {
  color: #333333;
  font-size: 28px;
}

.headdes {
  color: #666;
  font-size: 24px;
  margin-top: 20px;
}

.section1 {
  margin-top: 20px;
  padding: 32px;
  background-color: #ffffff;
  width: 750px;
}

.shipNow {
  flex-direction: row;
  align-items: center;
  margin-bottom: 5px;
}

.wuliu {
  flex: 1;
}

.location {
  color: #ba8833;
  font-size: 24px;
}

.time {
  color: #b5b5b5;
  font-size: 20px;
}

.iconfont {
  font-family: iconfont;
}

.user {
  flex-direction: row;
  align-items: center;
  padding: 10px 0;
}

.userName {
  font-size: 28px;
  color: #000;
  margin-right: 20px;
}
.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicator {
  width: 40px;
  height: 40px;
}
.userPhone {
  font-size: 28px;
  color: #999;
}

.address {
  font-size: 28px;
  color: #333333;
}

.orderDetail {
  padding: 30px;
}

.section2 {
  margin-top: 20px;
}
.mb100 {
  margin-bottom: 100px;
}
.order_top {
  background-color: #fff;
  width: 750px;
  flex-direction: row;
  align-items: flex-start;
  border-bottom-style: solid;
  border-bottom-color: #e8e8e8;
  border-bottom-width: 1px;
  padding: 30px 32px;
}

.googPic {
  width: 116px;
  height: 116px;
  background-color: #f5f5f5;
}

.goods_info {
  padding-left: 30px;
  flex: 1;
}

.goods_title {
  font-size: 22px;
  line-height: 30px;
  color: #666666;
}

.goods_spec {
  padding-top: 10px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.priceInfo {
  color: #666666;
  font-size: 20px;
}

.specInfo {
  color: #999999;
  font-size: 22px;
  /* background-color: #f2f22f; */
}

.priceBox {
  padding: 20px 32px;
  background-color: #ffffff;
  width: 750px;
}

.orderPrice {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 3px 0;
}

.titPrice {
  font-size: 28px;
  color: #999999;
}

.price {
  font-size: 28px;
  color: #666;
}

.realprice {
  font-size: 28px;
  color: #ec414d;
  font-weight: 600;
}

.deTit {
  font-size: 30px;
  color: #494949;
  margin-bottom: 10px;
}

.detailItem {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.itemLeft {
  flex-direction: row;
  align-items: center;
  flex: 1;
}

.detaTit {
  color: #999999;
  font-size: 28px;
  width: 210px;
}

.detaInf {
  color: #333333;
  font-size: 28px;
}

.viewBox {
  border-width: 1px;
  border-color: #979797;
  border-style: solid;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  margin-top: 10px;
}

.copy {
  background-color: #303030;
  color: #ffffff;
  font-size: 18px;
  border-radius: 5px;
  line-height: 44px;
  padding: 0 20px;
}

.copy:active {
  background-color: #000;
}

.bottomBtn {
  height: 90px;
  width: 750px;
  background-color: #f5f5f5;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.btn {
  display: block;
  height: 68px;
  line-height: 66px;
  border-width: 1px;
  border-style: solid;
  border-color: #303030;
  border-radius: 8px;
  margin: 0 10px;
  padding: 0 15px;
  min-width: 150px;
  text-align: center;
  font-size: 28px;
  color: #333333;
}
.btns {
  display: block;
  height: 50px;
  line-height: 48px;
  border-width: 1px;
  border-style: solid;
  border-color: #303030;
  border-radius: 8px;
  margin: 0 10px;
  padding: 0 15px;
  min-width: 150px;
  text-align: center;
  font-size: 28px;
  color: #333333;
}

.blackBtn {
  background-color: #303030;
  color: #ffffff;
}

.blackBtn:active {
  background-color: #eeeeee;
}
</style>
